import React from "react"
import PropTypes from "prop-types"
import { observer, inject } from "mobx-react"
import themes from "../themes"
import ApiModel from "../../../api/apiModel/apiModel"
import EndPop from "../../../components/pops/endPop"
import "./checkTheme.scss"

@inject("UserStore")
@observer
class CheckTheme extends React.Component {
  static contextTypes = {
    router: PropTypes.object.isRequired,
  }
  constructor(props) {
    super(props)
    this.state = {
      checkTheme: 1,
      checkThemeIndex: 0,
      checkThemeChild: 11,
      checkThemeChildIndex: 0,
    }
  }
  componentWillMount() {}
  componentDidUpdate() {}
  componentDidMount() {}
  componentWillUnmount() {}
  changeThemeChildFun = (index, array, type) => {
    if (type === "add") {
      if (index + 1 >= array.length) {
        this.props.UserStore.changeThemeChild(array[0].key, 0)
      } else {
        this.props.UserStore.changeThemeChild(array[index + 1].key, index + 1)
      }
    } else {
      if (index - 1 < 0) {
        this.props.UserStore.changeThemeChild(
          array[array.length - 1].key,
          array.length - 1
        )
      } else {
        this.props.UserStore.changeThemeChild(array[index - 1].key, index - 1)
      }
    }
  }
  postTheme = () => {
    let {
      checkTheme,
      checkThemeIndex,
      checkThemeChild,
      checkThemeChildIndex,
    } = this.state
    let { repeatUploadFlag } = this.props.UserStore
    console.log(repeatUploadFlag)
    if (!repeatUploadFlag) {
      this.showOrHideLoading(true, "loading")
      let data = {
        theme: checkTheme,
        theme_child: checkThemeChild,
      }
      ApiModel.postUserEntry(data).then((res) => {
        if (res.code === 0) {
          setTimeout(() => {
            this.showOrHideLoading(false, "")
            this.props.UserStore.changeTheme(checkTheme, checkThemeIndex)
            this.props.UserStore.changeThemeChild(
              checkThemeChild,
              checkThemeChildIndex
            )
            this.props.UserStore.changeUserState("uploadMsg")
          }, 500)
        } else {
          setTimeout(() => {
            this.showOrHideLoading(false, "")
            this.setErrorMsgFun("选择主题失败<br/>请稍后重试")
          }, 500)
        }
      })
    } else {
      this.props.UserStore.changeTheme(checkTheme, checkThemeIndex)
      this.props.UserStore.changeThemeChild(
        checkThemeChild,
        checkThemeChildIndex
      )
      this.props.UserStore.changeUserState("uploadMsg")
    }
  }
  setErrorMsgFun = (errorMsg) => {
    this.props.UserStore.setErrorMsg(true, errorMsg)
    this.timer = setTimeout(() => {
      this.props.UserStore.setErrorMsg(false, "")
    }, 3000)
  }
  showOrHideLoading = (flag, msg) => {
    this.props.UserStore.setPostOrGetData(flag, msg)
  }

  changeCheckCheme = (theme, index, e) => {
    this.setState({
      checkTheme: theme,
      checkThemeIndex: index,
      checkThemeChild: themes[index].childrens[0].key,
      checkThemeChildIndex: 0,
    })
    let screenX = document.body.clientWidth
    // 屏幕宽度
    let clientWidth = e.target.clientWidth // 选中 div 的宽度
    let offsetLeft = e.target.offsetLeft
    if (clientWidth + offsetLeft + 20 > screenX) {
      let left = offsetLeft - screenX / 2 + 100
      this.refs.themeArray.scrollLeft = left
    } else if (clientWidth + offsetLeft + 20 < screenX) {
      this.refs.themeArray.scrollLeft = 0
    }
  }

  changeCheckThemeChild = (index, array, type) => {
    if (type === "add") {
      if (index + 1 >= array.length) {
        //  this.props.UserStore.changeThemeChild(array[0].key, 0)
        this.setState({
          checkThemeChild: array[0].key,
          checkThemeChildIndex: 0,
        })
      } else {
        this.setState({
          checkThemeChild: array[index + 1].key,
          checkThemeChildIndex: index + 1,
        })
        // this.props.UserStore.changeThemeChild(array[index + 1].key, index + 1)
      }
    } else {
      if (index - 1 < 0) {
        this.setState({
          checkThemeChild: array[array.length - 1].key,
          checkThemeChildIndex: array.length - 1,
        })
        // this.props.UserStore.changeThemeChild(
        //   array[array.length - 1].key,
        //   array.length - 1
        // )
      } else {
        this.setState({
          checkThemeChild: array[index - 1].key,
          checkThemeChildIndex: index - 1,
        })
        // this.props.UserStore.changeThemeChild(array[index - 1].key, index - 1)
      }
    }
  }

  render() {
    let { mode } = this.props.UserStore
    let { checkThemeIndex, checkThemeChildIndex } = this.state
    return (
      <div className="check-theme-container">
        <EndPop />
        <div className="theme-bkg-area">
          {mode === 1 && (
            <div className="theme-title xuexiao">
              <div className="theme-text">选择作品主题</div>
            </div>
          )}
          {mode === 2 && (
            <div className="theme-title jiating">
              <div className="theme-text">选择作品主题</div>
            </div>
          )}
        </div>
        <div className="theme-area">
          <div className="main-theme-area" ref="themeArray">
            {themes.map((item, index) => {
              return (
                <div
                  key={index}
                  className={
                    checkThemeIndex === index
                      ? "main-theme-item check"
                      : "main-theme-item"
                  }
                  onClick={(e) => {
                    this.changeCheckCheme(item.key, index, e)
                    // this.props.UserStore.changeTheme(item.key, index)
                  }}
                >
                  {item.name}
                </div>
              )
            })}
          </div>
          <div className="second-theme-area">
            {themes[checkThemeIndex].childrens.map((item, index) => {
              return (
                <div key={index}>
                  {checkThemeChildIndex === index ? (
                    <div>
                      <img
                        className="second-theme-item"
                        src={item.url}
                        alt=""
                      />
                      <div className="second-theme-desc">
                        {themes[checkThemeIndex].name} - {item.name}
                      </div>
                    </div>
                  ) : null}
                  <img
                    onClick={() => {
                      this.changeCheckThemeChild(
                        checkThemeChildIndex,
                        themes[checkThemeIndex].childrens,
                        "dsc"
                      )
                      // this.changeThemeChildFun(
                      //   checkThemeChildIndex,
                      //   themes[checkThemeIndex].childrens,
                      //   'dsc'
                      // )
                    }}
                    className="link-icon left"
                    src={require("../../../static/upload/icon_jiantou_zuo@3x.png")}
                    alt=""
                  />
                  <img
                    onClick={() => {
                      this.changeCheckThemeChild(
                        checkThemeChildIndex,
                        themes[checkThemeIndex].childrens,
                        "add"
                      )
                      // this.changeThemeChildFun(
                      //   checkThemeChildIndex,
                      //   themes[checkThemeIndex].childrens,
                      //   'add'
                      // )
                    }}
                    className="link-icon right"
                    src={require("../../../static/upload/icon_jiantou_you@3x.png")}
                    alt=""
                  />
                </div>
              )
            })}
          </div>
          <div className="check-theme-desc">
            {/* 选择主题后，需要按照对应主题图片搭建作品 */}
            {/* 选择主题后，可选定参考图片建筑进行拼搭；也可自选本主题下“闵行区”其他特色建筑样式进行自由拼搭 */}
            可参考本主题下所选景区内的建筑物进行拼搭；也可选择本主题下"自选建筑"，针对「闵行区」其他特色建筑样式进行自由拼搭
          </div>
          <div
            className="theme-next"
            onClick={() => {
              this.postTheme()
            }}
          >
            确定主题
          </div>
        </div>
      </div>
    )
  }
}

export default CheckTheme
